import 'scss/task.scss'
import React from 'react'
import { totalConfig, propName } from 'config/templateConfig'


export default React.createClass({
    getInitialState() {
        return { completeList: {}, receiveList: {}, taskInfo: null }
    },
    componentDidMount() {

    },
    selectTask(taskId) {
        var self = this
        var taskInfo = totalConfig.task[taskId]
        self.setState({ taskInfo: taskInfo })

    },
    completeTask(taskId) {
        var self = this
        let player = window.player
        let ret = player.task.completeTask(taskId, player)
    },
    render() {
        let self = this
        let completeListNode = []
        let receiveListNode = []
        let taskNode
        if (this.state.completeList) {
            for (let key of Object.keys(this.state.completeList)) {
                completeListNode.push(
                    <button className="item" key={key} onClick={self.selectTask.bind(self, key)}>{key}</button>
                )
            }
        }
        if (this.state.receiveList) {
            for (let key of Object.keys(this.state.receiveList)) {
                completeListNode.push(
                    <button className="item" key={key} onClick={self.selectTask.bind(self, key)}>{key}</button>
                )
            }
        }

        if (this.state.taskInfo) {
            taskNode = <div className="taskInfo">
                <div className="title">{this.state.taskInfo.name}</div>
                <div className="taskContent">{this.state.taskInfo.desc}</div>
                <div className="bottom">
                    <button onClick={this.completeTask.bind(this, this.state.taskInfo.templateId)}>完成任务</button>
                </div>
            </div>
        }
        return <div id="task" className="flex d-column">
            <div className="flex-g-1">
                <div className="head">
                    <div className="title">任务</div>
                </div>
                <div>已经完成的任务</div>
                <div className="flex wrap">{completeListNode}</div>
                <div>接受的任务</div>
                <div className="flex wrap">{receiveListNode}</div>
            </div>
            {taskNode}
        </div>
    }
})
